<template>
	<view>
		<!-- <u-navbar :is-back="true" :is-fixed="true" title="我的证件"></u-navbar> -->
		<scroll-view scroll-y scroll-with-animation style="height: calc(100vh - 50px)" :show-scrollbar="false">
			<free-divider></free-divider>

			<view class="pl-2 pr-2 py-3">
				<view class="dfex border-bottom mt-2 pb-3" v-for="(item, index) in list">
					<view class="font-14">{{ item.papersName }}</view>
					<u-image class="pl-5" style="width: 144px; height: 88px;" :src="getFullPicUrl(item.papersPhotoUrl)"
						@error="handleImageError" @click="previewImage(item)"></u-image>
					<view class="dfex text-8ED0F2 pl-2 mt-14 font-14" style="width: 100px;">
						<view @click="previewImage">下载</view>
						<view @click="deleteI(item.id)">删除</view>
					</view>
				</view>
			</view>
		<view v-if="list.length === 0" class="text-center mt-3 mb-3">
			<view class="icon-sousuo1 iconfont text-999999" style="font-size: 55px;"></view>
			<view class="text-999999 font-15">暂时木有内容呀~~</view>
		</view>
			<ferrButton title="添加新证件" @click="showAddBox"></ferrButton>
			<!-- 修改名字|修改微信号 弹框-->
			<free-confirm ref="confirm" :title="confirmTitle">
				<u-field v-model="currentPapersName" label="证件名称" placeholder="请输入证件名称">
				</u-field>
				<view class="flex-y py-3 pl-2 pr-2">
					<view class=""> 证件上传 </view>
					<u-upload ref="uUpload" :max-size="4 * 1024 * 1024" :form-data="{'biz':'temp'}" :header="header"
						:action="getUploadUrl()" max-count="1" @on-success="uploadSuccess"></u-upload>
				</view>
				<view class="font-12 text-999999 pl-1">图片大小限制不能超过4MB</view>
			</free-confirm>
		</scroll-view>
	</view>
</template>

<script>
	import freeAvater from '@/components/free-ui/free-avater.vue';
	import freeDivider from '@/components/free-ui/free-divider.vue';
	import ferrButton from '@/components/free-ui/ferr-button.vue';
	import freeConfirm from '@/components/free-ui/free-confirm.vue';
	import $H from '@/common/free-lib/request.js';
	import $U from "@/common/free-lib/util.js";
	import {
		getImageUrl
	} from '@/common/free-lib/util.js';
	export default {
		components: {
			freeAvater,
			freeDivider,
			freeConfirm,
			ferrButton,

		},
		data() {
			return {
				confirmType: '',
				confirmText: '',
				list: [],
				papersPhotoUrl: '',
				currentPapersName: '',
				header: $H.getTokenHeader()
			}
		},
		computed: {
			confirmTitle() {
				return this.confirmType == 'username' ? '添加新证件' : '添加新证件'
			},
		},
		created() {
			this.getList()
		},
		methods: {
			handleImageError() {
				uni.showToast({
					title: '图片格式不支持，图片加载失败，请重新上传',
					icon: 'none',
					duration: 4000
				});

			},
			download(url) {
				$H.downloadPic(url);
			},
			getFullPicUrl(url) {
				return $H.getFullImageUrl(url);
			},
			getUploadUrl(url) {
				return $H.getFullUrl('sys/common/upload');
			},
			getFullImageUrl(imagePath) {
				return getImageUrl(imagePath);
			},
			previewImage(item) {
				uni.previewImage({
					urls: this.list.map(img => this.getFullImageUrl(img.papersPhotoUrl)), // 所有图片的 URL 数组
					current: this.getFullImageUrl(item.papersPhotoUrl), // 当前点击的图片 URL
					success: function() {
						uni.showToast({
							title: '长按图片可保存',
							icon: 'none',
							duration: 5000 // 2秒钟的显示时间
						});
					}
				});
			},
			uploadSuccess(response) {
				if (response.code === 0) {
					uni.showToast({
						title: '图片上传成功',
						icon: 'none'
					});

					// Check if basePhoto already contains an image, replace it with the new one
					if (this.form.basePhoto.length > 0) {
						this.form.basePhoto[0] = {
							url: response.data,
							message: response.message
						};
					} else {
						// If basePhoto is empty, add the new image
						this.form.basePhoto.push({
							url: response.data,
							message: response.message
						});
					}
				} else {
					uni.showToast({
						title: response.message || '图片上传失败',
						icon: 'none'
					});
				}
			},
			showAddBox() {
				const userId = $U.getStorage("id");

				this.$refs.confirm.show((close) => {
					let files = [];
					// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
					files = this.$refs.uUpload.lists.filter(val => {
						return val.progress == 100;
					})
					if (files.length == 0) {
						uni.showToast({
							title: '请上传文件',
							icon: 'none'
						});
						return;
					}
					if (!this.currentPapersName) {
						uni.showToast({
							title: '请输入证件名称',
							icon: 'none'
						});
						return;
					}
					$H.post('/basisInform/papersManage/down/add', {
						papersManageItemList: [{
							papersName: this.currentPapersName,
							papersPhotoUrl: files[0].response.message
						}, ],
						userId: userId

					}, {}).then(res => {
						if (res.code === 200) {
							uni.showToast({
								title: res.message,
								icon: 'none',
							})
							this.currentPapersName = '';
							this.getList();
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none',
							})
						}
						close();
					}).catch(err => {
						uni.showToast({
							title: err.message,
							icon: 'none'
						});
					});
					close();
				});

			},



			getList() {
				// TODO: 证件数据对接
				$H.post(`/basisInform/papersManage/down/List`, {}, {
					token: true
				}).then(
					(res) => {
						this.list = res.result
					}
				)
			},
			deleteI(item) {
				const _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认删除？',
					success: function(res) {
						if (res.confirm) {
							$H.post(
								`/basisInform/papersManage/down/delete?id=${item}`, {}, {
									token: true
								}
							).then((res) => {
								if (res.success || res.code === 200) {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
									_this.getList()
									_this.list = []
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none',
									})
								}
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '删除取消',
								icon: 'none',
							})
						}
					},
				})
			},
		},
	}
</script>

<style></style>